<template>
<!-- 评论管理 -->
  <div id="Administration">
    <div id="managements">
      <!--搜索框 -->
      <div id="manage-top">
       <el-input placeholder="评论ID"  v-model="ruleForm.id"></el-input>
       <el-input placeholder="评论姓名" v-model="ruleForm.userNickName"></el-input>
       <el-input placeholder="评论名称" v-model="ruleForm.spuTitle"></el-input>
       <el-input placeholder="评论内容" v-model="ruleForm.content"></el-input>
        <button type="button" class="el-button el-button--primary" @click="management()">
          <i class="el-icon-search"></i><span>查找</span>
        </button>
        <button type="button" class="el-button el-button--primary" @click="additions()">
          <i class="el-icon-edit"></i><span>添加</span>
        </button>
      </div>
      <!-- 数据操作 -->
      <div id="manage-bottom">
        <el-table
          border
          :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
          :key="id"
        >
          <el-table-column label="评论编号" prop="id"></el-table-column>
          <el-table-column label="评论内容" prop="content"></el-table-column>
          <el-table-column label="评论分数" prop="score"></el-table-column>
          <el-table-column label="用户ID" prop="userId"></el-table-column>
          <el-table-column label="用户昵称" prop="userNickName"></el-table-column>
          <el-table-column label="订单ID" prop="orderId"></el-table-column>
          <el-table-column label="商铺ID" prop="spuId"></el-table-column>
          <el-table-column label="商铺名称" prop="spuTitle"></el-table-column>
          <el-table-column label="评论时间">
              <template slot-scope="scope">{{scope.row.gmtUpdate | formatDate()}}</template>
          </el-table-column>
          <el-table-column align="right" label="操作" width="250px;">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)" v-Promise="'operation:appraise:delete'">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div id="block">
        <!-- current-change当前页size-change每页条数current-page当前页数，支持 .sync 修饰符page-sizes每页显示条目个数，支持 .sync 修饰符-->
        <Paging @handle="handles" :allPages="allPages"></Paging>
      </div>

    </div>
  </div>
</template>
<script>
import comment from "@/api/comments.js";
import Paging from "../../components/Paging"; //分页
import qs from "qs";
export default {
  components: {
    Paging
  },
  data() {
    return {
      status:"",
      adType:"",
      id: "",
      input: "",
      search: "",
      titleName: "", //是否添加还是编辑
      tableData: [{}],
      dialogFormVisible: false, //弹窗口
      totalPageNo: 1,
      value1: [],
      //分页
      allPages: {
        currentPage: 1, //当前的默认的页数
        eachpage: 20, //默认的页码
        total: 0, //初始值共数据条
        totalPageNo: 1,
        // 查询
      }, 
      ruleForm: {
        id:'',
       userNickName:"",
       spuTitle:"",
       content:""
      },
    }
  },
 //时间戳
  filters: {
    formatDate: function(value) {
      let date = new Date(value);
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      return MM + "月" + d + "日 " + h + "时" + m + "分";
    },
  },
  methods: {
    // 分页负值
    handles(val) {
      this.allPages = val;
      this.management();
    },
    // 管理员数据列表
    management() {
      let _this = this;
      comment.comments(_this.allPages,_this.ruleForm).then(function(res) { 
        _this.tableData = res.data.data.items;
         // 分页
       _this.allPages.currentPage = res.data.data.pageNo;
        _this.allPages.eachpage = res.data.data.pageSize;
        _this.allPages.total = res.data.data.total;
        _this.allPages.totalPageNo = res.data.data.totalPageNo;
      });
    },
        // 删除
        handleDelete(index, row) {
          var _this = this;
           //   提示框
          _this.$confirm("此操作将永久删除, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
            .then(() => {
              _this.$information.success('删除成功')
              let data = {
                id:row.id
              };
              comment.handleDeletec(data).then(function(res) {
                _this.tableData.splice(index, 1);
              });
            });
        },      
  },   
  created() {
    this.management();
  },
   watch:{
    dialogFormVisible(){
      this.$nextTick(() => {
       this.$refs.ruleForm.clearValidate();
      })
    }
  }
};

</script>

<style scoped>
#Administration {
  width: 100%;
  height: 100%;
}
#Administration ::-webkit-scrollbar {
  width: 0px !important;
}
#managements {
  width: 80vw;
  height: 80vh;
  margin: auto;
}
/* 搜索框 */
#manage-top {
  width: 100vw;
  display: flex;
  margin-bottom: 30px;
}
#manage-top .el-input__inner {
  width: 200px;
}
.el-input {
  width: 210px;
}

/* 表格样式*/
#block {
  margin-top: 30px;
}
.kohlrabiblue {
  background: #66b1ff;
  color: #ffffff;
}
.el-table--enable-row-transition/deep/.el-table__body td {
  text-align: center;
}
.el-table/deep/th.is-sortable {
  cursor: pointer;
  text-align: center;
}
.el-table td,
.el-table/deep/th.is-leaf {
  text-align: center;
}
/*  */
.loginRight {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 0px 8px 8px 0px;
}
.login-right {
  width: 80%;
  margin: auto;
}
.loginRight .login-title {
  color: #333;
  margin-bottom: 40px;
  font-weight: 500;
  font-size: 22px;
  text-align: center;
  letter-spacing: 4px;
  margin-top: 40px;
}
.el-form-item/deep/input {
  background: transparent;
  border-radius: 0;
  color: #333;
  display: inline;
}
.el-form-item {
  height: 50px !important;
  position: relative;
}
.el-form-item/deep/i {
  display: inline;
}
.impose {
  padding-top: 40px;
  position: relative;
}
.poke {
  position: absolute;
  top: 55px;
  left: -102px;
}
.el-checkbox {
  width: 300px;
  margin: 20px 0px 30px 0px;
}
/* 弹出框 */
.el-input-group__append {
  position: relative;
  top: -40px;
  left: 210px;
}
#deadline {
  position: relative;
}
.time {
  position: absolute;
  top: 42px;
  left: 0px;
}
.el-form-item__content {
  height: 10px;
}
/* 上传 */
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #409eff;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.uploading {
  margin-left: 30px;
  margin-bottom: 20px;
}
.uploading span {
  height: 0px;
  color: #606266;
}
.avatar-uploader {
  margin-left: 100px;
}
.uptitle {
  height: 0px;
}
</style>